<template>
	<!-- 物流信息页面 -->
	<view class="content">
		<view class="top">
			<view class="kls">
			<image src="http://wx.crh2009.com/attachment/images/2/2020/09/VMvAe6rxiIWEWaurzssaaxUms70INB.jpg" mode="widthFix" class="smimg"></image>
			<view class="num">
				1件商品
			</view>
			</view>
			<view class="top_right">
				<view class="top_right_tit">
					物流状态：<view style="color: #ff80c0;font-size:30rpx;">配送中</view>
					</view>
					<view class="top_right_text" style="margin:8rpx 0">
						快递公司：中通快递
						</view>
						<view class="top_right_text">
							快递单号：773055303511257
							</view>
			</view>
		</view>
		
		<view class="wuliu_box">
		<view class="wuliu">
		<!-- 纵向排列 -->
		<uni-steps :options="list" direction="column" :active="active" active-color="#ef4f4f"></uni-steps>
		</view>
		</view>
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	import uniSteps from '../../component/uniui/uni-steps/uni-steps.vue'; //物流
	export default{
		components:{
		fixce,
		uniSteps
		},
		data(){
			return{
				topState:false,
				active:0,
				list:[
					{
					title:'快件由【广东东莞转运中心】发往【广东东莞南城集散中心】',
					desc:'2020-09-11 09:09:52',
					},
					{
					title:'快件已到达【广东东莞转运中心】扫描员是【虎门进港二组通派临时】',
					desc:'2020-09-11 09:09:52',
					},
					{
					title:'快件由【广东深圳转运中心】发往【广东东莞转运中心】',
					desc:'2020-09-11 09:09:52',
					}
					]
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　}
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.top{
		width:94%;
		padding:20rpx 3%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.kls{
		width:140rpx;
		position: relative;
		margin-right: 30rpx;
	}
	.smimg{
		width:100%;
	}
	.num{
		    background: rgba(0,0,0,0.8);
		    color: white;
			position: absolute;
			bottom:0;
			width:100%;
			text-align: center;
	}
	.top_right_tit{
		font-size:30rpx;
		display: flex;
		align-items: center;
	}
	.top_right_text{
		color:#999;
	}
	.wuliu_box{
		width:100%;
		background-color: #fff;
		padding:10rpx 0 0;
		margin-top:25rpx;
		margin-left:-15rpx;
	}
	.wuliu{
		width:93%;
		margin:0 auto;
	}
</style>
